let db;
// 我们的客户数据看起来像这样。
const customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" },
];
// 打开我们的数据库, open 方法的二个参数是数据库的版本号
const request = window.indexedDB.open("MyTestDatabase", 3);

request.onerror = (event) => {
  // 使用 request.errorCode 来做点什么！
  console.log(event);
};
/*
 *数据仓库打开成功
 */
request.onsuccess = function (res) {
  console.log("IndexedDB 打开成功", res);
  db = res.target.result;
  // db_table = db.createObjectStore('group', { keyPath: 'id' });
  // db_table.createIndex('indexName', 'name', { unique: false });
};
// /*
//  *数据仓库升级事件(第一次新建库是也会触发，因为数据仓库从无到有算是升级了一次)
//  */
// request.onupgradeneeded = function (res) {
//   console.log("IndexedDB 升级成功", res);
//   db = res.target.result;
//   db_table = db.createObjectStore("group", { keyPath: "id" });
//   db_table.createIndex("indexName", "name", { unique: false });

//   /*
//    *新建事务
//    *@params 数据仓库的数组
//    *@params 写入模式
//    */
//   var store = db.transaction(["group"], "readwrite").objectStore("group");

//   /*
//    *add方法添加数据
//    *@params 需要添加的数据信息
//    */
//   var requestStore = store.add({
//     id: new Date().getTime(),
//     name: "王二",
//     age: 12,
//     email: "XXXX@xxx.com",
//   });

//   /*
//    *添加成功
//    */
//   requestStore.onsuccess = function (event) {
//     console.log("数据添加成功", event);
//   };

//   /*
//    *添加失败
//    */
//   requestStore.onerror = function (event) {
//     console.log("数据添加失败", event);
//   };
// };
request.onupgradeneeded = (event) => {
  // 使用 request.result 来做点什么！
  db = event.target.result;
  db.onerror = (event) => {
    // 针对此数据库请求的所有错误的通用错误处理器！
    console.error(`数据库错误：${event.target.errorCode}`);
  };
  // 创建一个对象存储来存储我们客户的相关信息，我们将“ssn”作为键路径
  // 因为 ssn 可以保证是不重复的——或至少在启动项目的会议上我们是这样被告知的。
  const objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
  // 创建一个索引以通过姓名来搜索客户。名字可能会重复，所以我们不能使用 unique 索引。
  objectStore.createIndex("name", "name", { unique: false });
  // 使用邮箱建立索引，我们想确保客户的邮箱不会重复，所以我们使用 unique 索引。
  objectStore.createIndex("email", "email", { unique: true });
  // 使用事务的 oncomplete 事件确保在插入数据前对象存储已经创建完毕。
  objectStore.transaction.oncomplete = (event) => {
    // 将数据保存到新创建的对象存储中。
    const customerObjectStore = db
      .transaction("customers", "readwrite")
      .objectStore("customers");

    //   添加数据
    customerData.forEach((customer) => {
      customerObjectStore.add(customer);
    });

    // 获取数据
    const getStore = customerObjectStore.get("444-44-4444");
    getStore.onerror = (event) => {
      // 错误处理！
      console.log("获取数据失败了", event);
    };
    getStore.onsuccess = (event) => {
      // 对 request.result 做些操作！
      console.log(`SSN 444-44-4444 对应的名字是 ${event.target.result.name}`);

      // 更新数据库中的记录
      // 获取我们想要更新的旧值
      const data = event.target.result;

      // 更新对象中你想修改的值
      data.age = 42;

      // 把更新过的对象放回数据库。
      const requestUpdate = customerObjectStore.put(data);
      requestUpdate.onerror = (event) => {
        // 对错误进行处理
      };
      requestUpdate.onsuccess = (event) => {
        // 成功，数据已更新！
      };
    };

    // 使用游标
    // 使用 get() 要求你知道你想要检索哪一个键。如果你想要遍历对象存储空间中的所有值，那么你可以使用游标
    customerObjectStore.openCursor().onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          console.log(`SSN ${cursor.key} 对应的名字是 ${cursor.value.name}`);
          cursor.continue();
        } else {
          console.log("没有更多记录了！");
        }
      }
  };
};

// request.onupgradeneeded = (event) => {
//     console.log('IndexedDB 升级成功', event)
//     const db = event.target.result;

//     // 创建另一个名为“names”的对象存储，并将 autoIncrement 标志设置为真。
//     const objStore = db.createObjectStore("names", { autoIncrement: true });

//     // 因为“names”对象存储拥有键生成器，所以它的键会自动生成。
//     // 添加的记录将类似于：
//     // 键：1 => 值："Bill"
//     // 键：2 => 值："Donna"
//     customerData.forEach((customer) => {
//       objStore.add(customer.name);
//     });
//   };
